import { useState, useRef } from 'react';
import { View, Image } from '@tarojs/components';
import CarNum from '@/components/CarNum';
import { Button, Radio, Cell, Row, Col, Dialog } from '@nutui/nutui-react-taro';
import SellerPng from '@/assets/sell.png';
import BuyerPng from '@/assets/buy.png';
import Taro from '@tarojs/taro';
import './index.less';

function RoleRadioGroup() {
  enum ERole {
    Buyer = 'buyer',
    Seller = 'seller',
  }
  const handleRoleChange = (v) => {
    console.log(v);
  };
  return (
    <Radio.Group  labelPosition="left" onChange={handleRoleChange}>
      <Row gutter="12">
        <Col span="12">
          <Radio value={ERole.Seller} className="role-radio">
            <Image src={SellerPng} />
            我是卖家
          </Radio>
        </Col>
        <Col span="12">
          <Radio value={ERole.Buyer} className="role-radio">
            <Image src={BuyerPng} />
            我是买家
          </Radio>
        </Col>
      </Row>
    </Radio.Group>
  );
}

function Role() {
  const [plate_logs, setPlateLogs] = useState(false);
  const carPlateInputRef = useRef(null);
  const [dialog, setDialog] = useState(false);
  const handleSearchCarNum = () => {
    console.log(plate_logs, "plate_logs")
    if (carPlateInputRef.current) {
      const currentCarNumber = carPlateInputRef.current?.carNumber;
      if (currentCarNumber.length < 7) {
        Taro.showToast({
          title: '请输入正确的车牌',
          icon: 'none',
        });
        setDialog(true);
      }
      console.log('Current Car Number:', currentCarNumber);
      // 这里可以执行其他操作，比如将车牌号设置到表单或状态中
    }
    // 查询 ....
    if (!plate_logs) {
      setDialog(true);
    }
  };

  const handleConfirm = () => {
    setDialog(false);
    Taro.navigateTo({ url: '/pages/carInfo/index' });
  };

  return (
    <View className="role main-content">
      <Row>
        <Col span="24" className="font-bold">
          选择身份
        </Col>
      </Row>

      <RoleRadioGroup></RoleRadioGroup>

      <Row>
        <Col span="24" className="font-bold">
          输入车牌号
        </Col>
        <Col span="24">
          <Row>
            <CarNum ref={carPlateInputRef}></CarNum>
          </Row>
        </Col>
        <Col span="24">
          <Button className='check_button' style={{ width: '100%' }} onClick={handleSearchCarNum}>
            查询
          </Button>
        </Col>
      </Row>
      <Dialog
        visible={dialog}
        onConfirm={handleConfirm}
        onCancel={() => setDialog(false)}
        confirmText="去创建信息"
      >
        <Row>
          {/* <Col className="text-center">图片</Col> */}
          <Col className="font-bold text-center">该车牌无交易记录</Col>
          <Col style={{ fontSize: '26rpx', marginBottom: '0px' }}>
            未查询到该车牌有任何交易记录，可点击右下方按钮去填写信息创建新的交易
          </Col>
        </Row>
      </Dialog>
    </View>
  );
}

export default Role;
